<template>
	<!-- 我的博客  我赞过的博客 -->
	<view class="my-art">
		<u-navbar
		:title="pageTitle" 
		:is-back="true" 
		:background="navBgStyle" 
		title-color="#fff" 
		back-icon-color="#fff"
		>
		</u-navbar>
		
		<view class="content">
			<!-- 页面类型为 我的博客 / 我赞过的 渲染这个 -->
			<view class="swiper-action-box" v-if="(pageType == 'myblog' || pageType == 'mylike') && myBlogList">
				<u-swipe-action
				class="action-item"
				v-for="(item, index) in myBlogList.rows"
				:key="item.id"
				:index="index"
				:btn-width="pageType  == 'mylike'? '255' : '180'"
				@open="actionOpen"
				@click="actionClick"
				@content-click="actionContentClick"
				:show="item.isShow"
				:options="actionBtnOptions"
				bg-color="#fff"
				>
					
					<view class="art-item">
						<view class="art-cover">
							<u-image width="180" mode="widthFix" :src="item.cover"></u-image>
						</view>
						<view class="art-text">
							<!-- 文章标题 -->
							<text class="art-title">
								{{item.title}}
							</text>
							<!-- 分类 -->
							<view class="art-classify">
								<u-tag 
								v-for="classify in item.BlogClassifies" 
								:text="classify.classifyName" 
								:key="classify.classifyId"
								type="primary"
								size="mini"
								shape="circle"
								/>
							</view>
							<!-- 点赞量 浏览量 评论量 -->
							<view class="art-datas" v-if="item.title !='该文章已删除'">
								<!-- 点赞 -->
								<u-icon 
								class="art-icon"
								name="thumb-up" 
								color="#F2AE27" 
								size="22"
								label-size="22"
								:label="item.like_count">
								</u-icon>
								<!-- 评论 -->
								<u-icon
								name="chat"
								class="art-icon"
								color="#F2AE27" 
								size="22"
								label-size="22"
								:label="item.comment_count">
								</u-icon>
								<!-- 浏览量 -->
								<u-icon
								name="eye"
								class="art-icon"
								color="#F2AE27" 
								size="22"
								label-size="22"
								:label="item.read_count">
								</u-icon>
							</view>
							<!-- 发布时间 -->
							<text class="art-createTime">
								{{item.createdAt | date('yyyy年mm月dd日 hh时MM分')}} 发布
							</text>
						</view>
					</view>
					
				</u-swipe-action>
			</view>
			
			<!-- 页面类型为 我的关注 渲染这个 -->
			<view class="swiper-action-box" v-if="(pageType == 'myinterest') && myBlogList">
				<u-swipe-action
				class="action-item"
				v-for="(item, index) in myBlogList.rows"
				:key="item.id"
				:index="index"
				:btn-width="pageType  == 'myinterest'? '240' : '180'"
				@open="actionOpen"
				@click="actionClick"
				:show="item.isShow"
				:options="actionBtnOptions"
				bg-color="#fff"
				>
					
					<view class="author-item">
						<view class="author-avatar">
							<!-- 作者头像 -->
							<u-avatar :src="item.user.avatar"></u-avatar>
						</view>
						<view class="author-text">
							<!-- 作者昵称 -->
							<text class="author-name">
								{{item.user.name}}
							</text>
							
							<text class="author-desc">
								{{item.user.desc}}
							</text>
							
						</view>
					</view>
					
				</u-swipe-action>
			</view>
		
			<!-- 数据为空时 -->
			<u-empty
			text="空空如也~" 
			mode="list" 
			:show=" (myBlogList && myBlogList.rows) ? false : true "
			class="bloglist-empty"
			></u-empty>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				pageType: "",	// 	页面类型 我赞过的 / 我的博客 / 我的关注
				pageTitle: "",	//	页面标题
				myBlogList : {},	//	我的博客列表
				actionBtnOptions: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		methods: {
			//  获取我的博客列表
			async getMyArt() {
				let myBlogRes = await this._api.getMyBlog({
					limit: 100,
					offset:0
				});
				// 博客列表中新增一个isShow控制滑动显示
				myBlogRes.rows = myBlogRes.rows.map(item => {
					return {
						...item,
						isShow:false
					}
				})
				this.myBlogList = myBlogRes
				// console.log(myBlogRes);
			},
			// 滑块打开 关闭其他滑块
			actionOpen(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.myBlogList.rows[index].isShow = true;
				this.myBlogList.rows.forEach((item, i) => {
					(index != i) && (item.isShow = false)
				})
			},
			// 点击滑块右侧按钮触发
			async actionClick(i,j) {
				// i 是第几个滑块 j 是第几个按钮 
				/* 这里 j  0 是删除 /取消点赞 / 取消关注*/
				if( j == 0 ) {
					// 删除文章
					try{
						/* 根据页面类型不同请求不同接口 */
						switch (this.pageType) {
							// 我的博客页
							case "myblog" : {
								// 删除个人的博客
								await this._api.deleteBlogById({
									id: this.myBlogList.rows[i].id,
									projectId: 181
								})
								break;
							}
							// 我的关注页
							case "myinterest" :  {
								// 取消关注作者
								await this._api.InterstAuthor({
									id: this.myBlogList.rows[i].beFollowUserId,
									projectId: 181
								})
								break;
							}
							//  我赞过的
							case "mylike" : {
								// 取消点赞
								await this._api.cancelLikeBlog({
									id : this.myBlogList.rows[i].id,
									projectId: 181
								})
								break;
							}
						}
						this.$u.toast(`${this.actionBtnOptions[0].text}成功`);
						this.myBlogList.rows.splice(i,1);
						
					}catch(e){
						this.$u.toast(e.msg)
					} 
				}
			},
			// 点击滑块内容触发
			actionContentClick(i) {
				//  跳转到文章详情页
				this.$Router.push({
					path: '/subpages/artDetail/artDetail',
					query: {
						artid: this.myBlogList.rows[i].id
					}
				})
			},
			// 获取我的关注作者列表
			async getMyInterest () {
				try {
					let InterstRes = await this._api.getMyInterstAuthor()
					InterstRes.rows = InterstRes.rows.map(item => {
						return {
							...item,
							isShow:false
						}
					})
					this.myBlogList = InterstRes
					// console.log(InterstRes);
					
				}catch (e) {
					this.$u.toast(e.msg)
				}
			},
			//  获取我赞过的文章
			async getMyLikeArt() {
				try{
					let likeRes = await this._api.getMyLikeBlog();
					// console.log(likeRes);
					// 博客列表中新增一个isShow控制滑动显示 
					likeRes.rows = likeRes.rows.map(item => {
						if (typeof item.blog == "string") {
							return {
								id: item.blogId,
								title: item.blog,
								isShow: false,
								createdAt: item.createdAt
							}
						} else {
							return {
								...item.blog,
								isShow:false
							}
						}
					})
					this.myBlogList = likeRes
				}catch(e){
					this.$u.toast(e.msg)
				}
			}
		},
		onLoad(options) {
			let pagetype = options.pagetype;
			//  同步页面类型
			this.pageType = pagetype;
			
			switch (pagetype) {
				// 请求的是我的博客页
				case "myblog" : {
					this.pageTitle = '我的博客'	// 更改页头
					this.actionBtnOptions = [	// 更改滑块按钮文本
						{
							text: '删除',
							style: {
								backgroundColor: '#dd524d'
							}
						}
					]
					// 获取我的博客
					this.getMyArt()
					
					break;
				}
				// 我的关注页
				case "myinterest" : {
					this.pageTitle = '我的关注';
					this.actionBtnOptions = [	// 更改滑块按钮文本
						{
							text: '取消关注',
							style: {
								backgroundColor: '#dd524d',
							}
						}
					]
					// 获取我关注的作者列表
					this.getMyInterest()
					break;
				}
				case "mylike" : {
					this.pageTitle = '我赞过的';
					this.actionBtnOptions = [	// 更改滑块按钮文本
						{
							text: '取消点赞',
							style: {
								backgroundColor: '#dd524d'
							}
						}
					];
					// 获取我赞过的博客
					this.getMyLikeArt()
					break;
				}
				
			}
		},
		computed:{
			...mapState({
				navBgStyle: state => state.componStyle.navBgStyle,	//	顶部导航栏样式
				userInfo: state => state.userInfo.userInfo,			//	用户信息
			}),
		}
	}
</script>

<style lang="scss" scoped>
	.my-art {
		height: calc(100vh - var(--status-bar-height));
		background-color: $uni-bg-color-qgray;
		
		.content {
			padding: 20rpx;
			.bloglist-empty {
				height: 500px;
			}
			.swiper-action-box {
				border-radius: 20rpx;
				overflow: hidden;
			}
			.action-item {
				
			}
			// 文章列表相关样式
			.art-item {
				min-height: 200rpx;
				border-bottom: 1rpx dotted $uni-border-color;
				// background-color: pink;
				display: flex;
				padding: 20rpx;
				.art-cover {
					background-color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-right: 10rpx;
					padding: 8rpx;
					border-radius: 10rpx;
					border: 1px solid $uni-border-color;
				}
				.art-text {
					display: flex;
					width: 470rpx;
					flex-direction: column;
					justify-content: space-evenly;
					.art-title {
						font-size: 30rpx;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.art-datas {
						display: flex;
						.art-icon {
							margin-right: 10rpx;
						}
					}
					.art-createTime {
						font-size: 22rpx;
					}
				}
				
			}
			// 关注作者列表相关样式
			.author-item {
				border-bottom: 1rpx dotted $uni-border-color;
				display: flex;
				padding: 20rpx;
				.author-avatar {
					background-color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-right: 20rpx;
					padding: 8rpx;
				}
				.author-text {
					display: flex;
					width: 400rpx;
					flex-direction: column;
					justify-content: space-evenly;
					.author-name {
						font-size: 32rpx;
						font-weight: 600;
					}
				}
			}
		}
		
	}

</style>
